<template>
  <div>
    <el-drawer :visible.sync="drawer" direction="btt" size="80%" :withHeader="false">
      <div class="drawer_box">
        <div class="drawer_title">{{$t('Amount paid')}}：<span>${{ payment }}</span></div>
        <div class="card_flex">
          <div>{{$t('Amount payable')}}: <span>${{ payable }}</span></div>
          <div>{{$t('使用积分抵扣')}}: <span>${{ deduction }}</span></div>
        </div>
        <div class="card_title">
          <img src="../../../../assets/static/recharge/q4.png" alt=""/>
          <div>{{ $t('home.Paymentmethod') }}</div>
        </div>
        <div class="drawer_radio">
          <div @click="radioIndex = 1">
            <div>
              <img src="../../../../assets/static/choosePay/1.png" alt="">
              <div>{{$t('Pay with account balance')}}</div>
            </div>
            <img v-if="radioIndex === 1" src="../../../../assets/static/choosePay/3.png" alt="">
          </div>
          <div @click="radioIndex = 2">
            <div>
              <img src="../../../../assets/static/choosePay/2.png" alt="">
              <div>{{$t('银行卡支付')}}</div>
            </div>
            <img v-if="radioIndex === 2"
                 src="../../../../assets/static/choosePay/3.png" alt="">
          </div>
        </div>
        <div class="integral">
          <div>
            <div>
              <el-checkbox v-model="useScoreDeduction">{{$t('使用积分')}}</el-checkbox>
            </div>
            <div>
              <el-input :disabled="!useScoreDeduction"
                        v-model="deductionScore"
                        @input="beinput"
                        :placeholder="$t('输入使用积分')"></el-input>
            </div>
          </div>
          <div class="deduction">{{$t('抵扣')}}：
            <span>
              ${{ deduction }}
            </span>
          </div>
        </div>
        <div class="integral_info">{{$t('使用积分抵扣（当前账户积分余额 ') + ' '}}<span>{{ score }} </span>)</div>
        <div @click="machine_pay" class="goPay">{{$t('去支付')}}</div>
      </div>
    </el-drawer>
  </div>
</template>

<script>
import {machine_order, machine_pay} from '@/api/merbership/order'

export default {
  data() {
    return {
      drawer: false,
      radioIndex: 1,
      checked: '',
      input: '',
      //  -------------
      payable: '' // 应付
      , score: 2000
      , useScoreDeduction: false // 是否使用积分抵扣
      , deductionScore: 0 // 抵扣所使用的积分
      , order_no: '' // 订单号
    }
  },
  activated() {
  },
  props: {
    info: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  watch: {
    info(val) {
      if (val.searchOrder === '1') {
        this.machine_order()
      }
    }
  },
  computed: {
    /**
     * 实付金额
     * @returns {string}
     */
    payment() {
      return this.payable - this.deduction
    },
    /**
     * 抵扣金额
     * @returns {number}
     */
    deduction() {
      return this.deductionScore / 100
    }
  },
  methods: {
    show() {
      this.drawer = true
    },
    beinput() {
      this.deductionScore = this.deductionScore.replace(/[^\d]/g, '')
      if (this.deductionScore > this.score) {
        this.deductionScore = this.score
      }
      if (this.deduction > this.payable) {
        this.deductionScore = this.payable * 100
      }
    },
    //   ----------- axios -------------
    /**
     * 进入页面后请求
     */
    machine_order() {
      const pd = {
        qrcode_token: this.info.token
      }
      machine_order(this.$qs.stringify(pd))
        .then(res => {
          if (res.data.code === 1) {
            this.payable = res.data.data.pay_money
            this.score = Number(res.data.data.score)
            this.order_no = res.data.data.order_no
          } else {
            this.$message.error(res.data.msg)
          }
        })
    },
    /**
     * 进入页面后支付提交
     */
    machine_pay() {
      const pd = {
        order_no: this.order_no,
        reality_money: this.payment,
        score: this.deductionScore,
        pay_type: this.radioIndex
      }
      machine_pay(this.$qs.stringify(pd))
        .then(res => {
          if (res.data.code === 1) {
            this.$message.success(res.data.msg)
            this.drawer = false
            this.$emit('paysuccess')
          } else {
            this.$message.error(res.data.msg)
          }
        })
    }
  }
}
</script>

<style lang="scss" scoped>
.drawer_box {
  margin: 15px;

  .drawer_title {
    text-align: center;
    font-size: 18px;
    font-weight: bold;
    margin: 23px 0;

    span {
      color: #64BD1F;
    }
  }

  .card_flex {
    display: flex;
    justify-content: space-between;
    padding: 12px;
    border: #CBCBCB solid 1px;
    font-size: 12px;
    border-radius: 10px;

    span {
      color: #64BD1F;
    }
  }

  .card_title {
    margin: 15px 0;
    display: flex;
    align-items: center;
    font-size: 14px;
    font-weight: bold;

    img {
      width: 2.5px;
      height: 12.5px;
    }

    > div {
      margin-left: 8px;
    }
  }

  .drawer_radio {
    > div {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 10px 0;
      border-bottom: #CBCBCB solid 1px;

      img {
        width: 28px;
      }

      > div {
        display: flex;
        align-items: center;
        font-size: 12px;
        font-weight: bold;

        img {
          width: 30px;
        }
      }
    }

    > div:first-child {
      border-top: #CBCBCB solid 1px;
    }
  }

  .integral {
    padding: 10px 0;
    border-bottom: #CBCBCB solid 1px;

    > div:nth-child(1) {
      display: flex;
      align-items: center;
      justify-content: space-between;

      > div:nth-child(1) {
        margin-right: 18px;
      }
    }

    .deduction {
      text-align: right;
      margin-top: 10px;
      font-size: 12px;
      color: #999;

      span {
        color: #FFB300;
      }
    }
  }

  .integral_info {
    text-align: center;
    font-size: 14px;
    font-weight: bold;
    margin: 20px 0 15px 0;

    span {
      color: #FFB300;
    }
  }

  .goPay {
    background-image: url(../../../../assets/static/choosePay/4.png);
    width: 294px;
    margin: auto;
    padding: 25px 0 35px 0;
    text-align: center;
    color: #FFFFFF;
    font-size: 14px;
    font-weight: bold;
  }
}
</style>
<style type="text/css">
.el-drawer__open .el-drawer.btt {
  border-radius: 10px 10px 0 0 !important;
}
</style>
